<script setup lang="ts">
import { operatorList } from '@/components/common/common'

const props = withDefaults(
  defineProps<{
    modelValue: any
    type: string
    operator?: Array<string>
  }>(),
  {}
)
</script>

<template>
  <div style="width: 405px; display: flex">
    <el-select
      default-first-option
      v-model="props.modelValue!.operator"
      :disabled="operator === undefined || operator.length === 1"
      placeholder="Select"
      style="width: 105px"
    >
      <template v-if="operator === undefined">
        <el-option label="等于" value="EQ" />
      </template>
      <template v-else>
        <template v-for="it in operatorList" :key="it.value">
          <el-option
            :disabled="operator?.length <= 1"
            v-if="operator?.find((op) => op == it.value) !== undefined"
            :label="it.label"
            :value="it.value"
          />
        </template>
      </template>
    </el-select>
    <el-time-picker
      v-model="props.modelValue!.value"
      style="width: 300px"
      format="HH:mm:ss"
      value-format="YYYY-MM-DD HH:mm:ss"
      v-if="props.type === 'time' && props.modelValue!.operator === 'BETWEEN'"
      is-range
    />
    <el-time-picker
      v-model="props.modelValue!.value"
      style="width: 300px"
      format="HH:mm:ss"
      value-format="YYYY-MM-DD HH:mm:ss"
      v-else-if="props.type === 'time'"
    />
    <el-date-picker
      v-else-if="props.type === 'date' && props.modelValue!.operator === 'BETWEEN'"
      style="width: 300px"
      format="YYYY-MM-DD"
      value-format="YYYY-MM-DD HH:mm:ss"
      v-model="props.modelValue!.value"
      type="daterange"
    />
    <el-date-picker
      v-else-if="props.type === 'datetime' && props.modelValue!.operator === 'BETWEEN'"
      style="width: 300px"
      format="YYYY-MM-DD HH:mm:ss"
      value-format="YYYY-MM-DD HH:mm:ss"
      v-model="props.modelValue!.value"
      type="datetimerange"
    />
    <el-date-picker
      v-else-if="props.type === 'datetime'"
      style="width: 300px"
      format="YYYY-MM-DD HH:mm:ss"
      value-format="YYYY-MM-DD HH:mm:ss"
      v-model="props.modelValue!.value"
      type="datetime"
    />
    <el-date-picker v-else format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss" v-model="props.modelValue!.value" style="width: 300px" type="date" />
  </div>
</template>

<style scoped>
:deep(.el-select__wrapper) {
  background-color: var(--el-fill-color-light);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  box-shadow:
    1px 0 0 0 var(--el-border-color) inset,
    0 1px 0 0 var(--el-border-color) inset,
    0 -1px 0 0 var(--el-border-color) inset;
}

:deep(.el-input__wrapper) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
</style>
